<template>
  <div>
    <div class="top">
      <el-image src="./static/img/title.png" fit="contain" style="width: 300px;align-self: flex-start"></el-image>
      <el-menu @select="handleSelect" default-active="1" style="width: 700px" mode="horizontal" active-text-color="#ff9900">
        <el-menu-item index="1" route="/">首页</el-menu-item>
        <el-menu-item index="2">我的工作台</el-menu-item>
        <el-menu-item index="3">关于我们</el-menu-item>
      </el-menu>
      <el-link style="color: chocolate" href="http://localhost:8080/#/login" v-if="!user">亲，请登录</el-link>
      <span v-if="user">欢迎您</span>
    </div>
    <div  class="research">
      <el-input prefix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
      <el-button style="background-color: chocolate;color: white">搜索</el-button>
    </div>
    <div style="text-align: right;margin-right: 200px">
      <el-link type="warning" href="http://localhost:8080/#/trolley">我的购物车</el-link>
    </div>
    <div class="info">
      <div class="left">
        <img :src="goods.pic">
      </div>
      <div class="right">
        <div>{{goods.name}}</div>
        <div style="color: red">价格：￥{{goods.price}}</div>
        <div>选择购买数量：<el-input-number @change="priceChange"
                                     v-model="num" :min="1" :max="Number(goods.storage)">
        </el-input-number></div>
        <div style="color: chocolate">总价：{{totalPrice}}</div>
        <div style="display: flex;">
          <el-button style="width: 300px" type="warning" @click="addTrolley">加入购物车</el-button>
          <el-button style="width: 300px" type="warning" @click="buy">立即购买</el-button>
        </div>

      </div>
    </div>
    <div class="region">
      <h3>{{goods.shopname}}其他商品</h3>
      <ul>
        <!-- v-for key值 -->
        <li class="goods" v-for="item in refList">
          <!-- 图片 -->
          <div class="goodsPhoto" @click="toGoodsInfo(item)">
            <img :src="item.pic" width="200px" height="200px">
            <div>{{item.name}}</div>
            <div>{{item.price}}元</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "goodsInfo1",
  mounted() {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
    //获取该店铺所有售卖商品
    this.getRequest("../../static/index/class2.json").then(res=>
    {
      for(let i=0,length=res.length;i<length;i++)
      {
        this.refList.push(res[i]);
      }
    })
    this.goods = this.$route.query;
    this.totalPrice = this.goods.price;
    console.log(this.goods)
  },
  data(){
    return{
      goods:[],
      user:'',
      num:0,
      totalPrice:0,
      refList:[],
    }
  },
  methods: {
    handleSelect(index)
    {
      if(index==='1')
      {
        this.$router.push("/")
      }else if(index==='2')
      {
        if(this.user)
        {
          let identity = this.user.identity;
          if(identity==='1')
          {
            this.$router.push("/admin");
          }
          else if(identity==='2')
          {
            this.$router.push("/home");
          }else
          {
            this.$router.push("/cvo");
          }
        }else
        {
          this.$router.push("/login")
        }

      }else
      {
        this.dialogVisible = true;
      }
    },
    priceChange(event)
    {
      this.totalPrice = event * this.goods.price;
    },
    toGoodsInfo(item)
    {
      this.$router.push({
        name:'GoodsInfo1',
        query:item
      });
      location.reload();
    },
    addTrolley()
    {
      this.$message({
        message: '加入成功！可前去我的购物车查看',
        type: 'success'
      });
    },
    buy()
    {
      let param = {
        goods:this.goods,
        num:this.num,
        price:this.totalPrice
      }
      //前往下单页面
      this.$router.push({
        name:'Buy',
        query: param
    })
    }
  }
}
</script>

<style>
.top{
  padding: 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.research
{
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}
.info{
  display: flex;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
}
.left{
  width: 400px;
  height:350px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.right{
  width: 500px;
  height: 350px;
  font-size: large;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.region{
  color: chocolate;
  margin:auto 200px;
}
.goods{
  display: block;
  float: left;
  align-items: center;
  width: 250px;
  height: 280px;
}
.goodsPhoto{

  text-align: center;
  margin: 10px 0;
}
</style>
